<template>
  <div>
    <div class="card" v-if="data.user.role==='USER'">泥嚎!欢迎使用本系统!</div>
    <div class="card" style="margin-top: 10px;width: 50%;" v-if="data.user.role === 'USER'">
      <div style="font-size: 18px; margin-bottom: 20px;">系统公告</div>
      <el-timeline style="max-width: 600px">
        <el-timeline-item :timestamp="item.time" color="#0bbd87" placement="top" v-for="item in data.noticeData">
<!--          <el-card>-->
<!--           也可以根据官网<div style="font-size: 20px">{{ item.title }}</div>-->
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
<!--          </el-card>-->
        </el-timeline-item>
      </el-timeline>
    </div>

    <div v-else>
      <div style="display: flex;  grid-gap: 10px" >
        <div class="card" style="height: 400px;width: 50%" id="pie"></div>
        <div class="card" style="height: 400px;width: 50%" id="bar"></div>
      </div>
      <div class="card" style="height: 400px;width: 100%;margin-top: 10px" id="line"></div>


    </div>
  </div>
</template>

<script setup>

import {reactive,onMounted} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import * as echarts from "echarts";

const data = reactive({
  user: JSON.parse(localStorage.getItem('code2025_user') || "{}"),
  noticeData: []
})

const loadNotice = () => {
  request.get('/notice/selectAll').then(res=>{
    if(res.code === '200'){
      data.noticeData = res.data
      if(data.noticeData.length > 3){
        data.noticeData = data.noticeData.slice(0,3)
      }
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadNotice()

const loadPie = () => {
  request.get("/echarts/pie").then(res=>{
    if(res.code === '200') {
      let chartDom = document.getElementById('pie');
      let myChart = echarts.init(chartDom);
      pieOptions.series[0].data = res.data
      myChart.setOption(pieOptions);

    }
  })
}

const loadBar = () => {
  request.get("/echarts/bar").then(res=>{
    if(res.code === '200') {
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      barOptions.xAxis.data = res.data.xAxis
      barOptions.series[0].data = res.data.yAxis
      myChart.setOption(barOptions);
    }
  })

  // let chartDom = document.getElementById('bar');
  // let myChart = echarts.init(chartDom);
  // myChart.setOption(barOptions);
}

const loadLine = () => {
  request.get("/echarts/line").then(res=>{
    if(res.code === '200') {
      let chartDom = document.getElementById('line');
      let myChart = echarts.init(chartDom);
      lineOptions.xAxis.data = res.data.xAxis
      lineOptions.series[0].data = res.data.yAxis
      myChart.setOption(lineOptions);
    }
  })

  // let chartDom = document.getElementById('bar');
  // let myChart = echarts.init(chartDom);
  // myChart.setOption(barOptions);
}

onMounted(()=>{
  loadPie()
  loadBar()
  loadLine()
})


// 饼图 在配置项哪里可以配
let pieOptions = {
  title: {
    text: '不同分类下用户发布旅游攻略帖子的数量',
    subtext: '数据统计维度：攻略分类',
    left: '25%'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)' //配置项
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '数据占比', //鼠标移上去显示内容
      type: 'pie',
      radius: '50%',
      center: ['50%', '60%'],
      data: [
        {value: 1048, name: '风景名胜'},
        {value: 735, name: '历史古迹'},
        {value: 580, name: '人文景观'},
      ],
      //   label: {
      //     // 调整标签位置
      //     position: 'outside', // 可选值为 'inside', 'outside', 'center' 等
      //     // 如果选择 'outside'，可以进一步设置引导线样式
      //     formatter: '{b}: {c} ({d}%)',
      //     rich: {
      //       a: {
      //         color: '#ddd',
      //         lineHeight: 22,
      //         align: 'center'
      //       },
      //       // 更多样式设置...
      //     }
      //   },
      //   emphasis: {
      //     itemStyle: {
      //       shadowBlur: 10,
      //       shadowOffsetX: 0,
      //       shadowColor: 'rgba(0, 0, 0, 0.5)'
      //     }
      //   }
      // }
    }
  ]
};

// 柱状图
let barOptions = {
  title: {
    text: '不同用户发布帖子数量Top5',
    subtext: '统计维度: 用户昵称',
    left: 'center'
  },
//   1. 扩大底部边距（关键步骤）
// 将 grid.bottom 从 30% 增加到 40%，为旋转后的标签预留更多空间：
  grid: { //--------------增加这个属性 bottom就是离底部的距离
    top: '20%',
    bottom: '30%'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    name: '用户昵称',
    axisLabel: {
      // show: true, // 是否显示刻度标签，默认显示
      interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签
      rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
      inside: false, // 刻度标签是否朝内，默认朝外
      margin: 30, // 刻度标签与轴线之间的距离
      align: 'right',
      verticalAlign: 'middle',
      fontSize: 12
    },
    nameLocation: "center",
    nameGap: 35
  },
  yAxis: {
    type: 'value',
    name: '攻略数量', // 注意这里的注释是中文
  },
  tooltip: {
    trigger: 'item',
  },
  series: [
    {
      data: [120, 280, 150, 80, 70, 110, 130], // 示例数据：横坐标维度对应的值（纵坐标）
      type: 'bar',
      itemStyle: {
        // 其他配置项
        normal: {
          color: function () {
            return "#" + Math.floor(Math.random()*(256*256*256-1)).toString(16);
          }
        }
      }
    }
  ],
};

// 折现图
let lineOptions = {
  title: {
    text: '最近一周每天平台用户发布帖子的数量',
    subtext: '统计维度: 最近一周',
    left: 'center'
  },
//   1. 扩大底部边距（关键步骤）
// 将 grid.bottom 从 30% 增加到 40%，为旋转后的标签预留更多空间：
  grid: { //--------------增加这个属性 bottom就是离底部的距离
    // top: '20%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    name: '日期',
  },
  yAxis: {
    type: 'value',
    name: '攻略数量', // 注意这里的注释是中文
  },
  series: [
    {
      data: [120, 280, 150, 80, 70, 110, 130], // 示例数据：横坐标维度对应的值（纵坐标）
      type: 'line',
      smooth: true,
      markLine: {
        data: [{type: 'average',name: '最近一周攻略发布数量平均值'}]
      },
      markPoint: {
        data: [
          {type: 'max',name: '最大值'},
          {type: 'min',name: '最小值'},
        ]
      }
    }
  ],
};


</script>